/* @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900"); */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: "Poppins", sans-serif;*/
}

:root {
  --primary-color: #343434;
  --box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  --border-radius: 4px;
  --text-color: rgb(237, 237, 237);
  --hover-color: rgb(87, 116, 221);
  --hover-text-color: #fff;
  --slider-shadow: inset 0 1px 1px rgb(47, 47, 47), 0 2px 3px rgb(27, 27, 27);
  --wind-transform: 0vw;
}
:root.left {
  --wind-transform: -20vw;
}
:root.right {
  --wind-transform: 20vw;
}

.snow {
  width: 100%;
  background-color: #92a2ff;
  color: var(--text-color);
  /*height: 100vh;*/
  overflow: hidden;
}
body.afternoon {
  background-color: #707ff2;
}
body.evening {
  background-color: #2a41c3;
}
body.night {
  background-color: #040b30;
}

.wrapper {
  background-image: linear-gradient(45deg, rgba(8, 211, 172, 0.45) 0%, rgba(8, 211, 172, 0.45) 12.5%, rgba(62, 29, 50, 0.45) 12.5%, rgba(62, 29, 50, 0.45) 25%, rgba(54, 55, 67, 0.45) 25%, rgba(54, 55, 67, 0.45) 37.5%, rgba(47, 81, 85, 0.45) 37.5%, rgba(47, 81, 85, 0.45) 50%, rgba(23, 159, 137, 0.45) 50%, rgba(23, 159, 137, 0.45) 62.5%, rgba(16, 185, 155, 0.45) 62.5%, rgba(16, 185, 155, 0.45) 75%, rgba(31, 133, 120, 0.45) 75%, rgba(31, 133, 120, 0.45) 87.5%, rgba(39, 107, 102, 0.45) 87.5%, rgba(39, 107, 102, 0.45) 100%), linear-gradient(135deg, #5774dd, #2304e5);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 240px;
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 6px;
  z-index: 2;
}
.wrapper .direction-switcher {
  position: relative;
  background-color: var(--primary-color);
  border-radius: 10px;
  display: flex;
  padding: 0 3px;
  align-items: center;
  overflow: hidden;
}
.wrapper .direction-switcher .slider {
  display: block;
  position: absolute;
  z-index: 1;
  width: calc((100% - 6px) / 3);
  top: 3px;
  transform: translatex(-110%);
  bottom: 3px;
  border-radius: 6px;
  transition: 0.15s ease, transform 0.25s ease-out;
  background-color: var(--bg-button);
  background-image: repeating-linear-gradient(45deg, rgba(118, 118, 118, 0.05) 0px, rgba(118, 118, 118, 0.05) 19px, rgba(59, 59, 59, 0.05) 19px, rgba(59, 59, 59, 0.05) 67px, rgba(195, 195, 195, 0.05) 67px, rgba(195, 195, 195, 0.05) 87px, rgba(121, 121, 121, 0.05) 87px, rgba(121, 121, 121, 0.05) 133px, rgba(250, 250, 250, 0.05) 133px, rgba(250, 250, 250, 0.05) 172px, rgba(106, 106, 106, 0.05) 172px, rgba(106, 106, 106, 0.05) 197px, rgba(151, 151, 151, 0.05) 197px, rgba(151, 151, 151, 0.05) 226px, rgba(219, 219, 219, 0.05) 226px, rgba(219, 219, 219, 0.05) 260px), repeating-linear-gradient(45deg, rgba(70, 70, 70, 0.05) 0px, rgba(70, 70, 70, 0.05) 40px, rgba(220, 220, 220, 0.05) 40px, rgba(220, 220, 220, 0.05) 79px, rgba(95, 95, 95, 0.05) 79px, rgba(95, 95, 95, 0.05) 103px, rgba(15, 15, 15, 0.05) 103px, rgba(15, 15, 15, 0.05) 148px, rgba(51, 51, 51, 0.05) 148px, rgba(51, 51, 51, 0.05) 186px, rgba(225, 225, 225, 0.05) 186px, rgba(225, 225, 225, 0.05) 202px, rgba(60, 60, 60, 0.05) 202px, rgba(60, 60, 60, 0.05) 239px, rgba(67, 67, 67, 0.05) 239px, rgba(67, 67, 67, 0.05) 259px), repeating-linear-gradient(45deg, rgba(146, 146, 146, 0.05) 0px, rgba(146, 146, 146, 0.05) 40px, rgba(166, 166, 166, 0.05) 40px, rgba(166, 166, 166, 0.05) 54px, rgba(156, 156, 156, 0.05) 54px, rgba(156, 156, 156, 0.05) 71px, rgba(134, 134, 134, 0.05) 71px, rgba(134, 134, 134, 0.05) 95px, rgba(77, 77, 77, 0.05) 95px, rgba(77, 77, 77, 0.05) 111px, rgba(26, 26, 26, 0.05) 111px, rgba(26, 26, 26, 0.05) 153px, rgba(46, 46, 46, 0.05) 153px, rgba(46, 46, 46, 0.05) 202px, rgba(197, 197, 197, 0.05) 202px, rgba(197, 197, 197, 0.05) 216px), linear-gradient(90deg, #1eb2f8, #2e24c5);
  box-shadow: var(--slider-shadow);
}
.wrapper .direction-switcher input {
  display: none;
}
.wrapper .direction-switcher input:nth-of-type(1):checked ~ .slider {
  transform: translateX(0);
}
.wrapper .direction-switcher input:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}
.wrapper .direction-switcher input:nth-of-type(3):checked ~ .slider {
  transform: translateX(200%);
}
.wrapper .direction-switcher label {
  cursor: pointer;
  position: relative;
  user-select: none;
  padding: 10px 15px;
  font-size: 0.8rem;
  z-index: 2;
  width: calc(100% / 3);
}
.wrapper .select {
  position: relative;
  width: 100%;
  height: 40px;
}
.wrapper .select:hover::before, .wrapper .select:hover::after {
  background-color: var(--hover-color);
}
.wrapper .select::before {
  content: "";
  position: absolute;
  background-color: var(--text-color);
  top: 20px;
  right: 28px;
  width: 12px;
  height: 2px;
  z-index: 10;
  rotate: 40deg;
  transition: 0.5s;
}
.wrapper .select::after {
  content: "";
  position: absolute;
  background-color: var(--text-color);
  top: 20px;
  right: 20px;
  width: 12px;
  height: 2px;
  z-index: 10;
  rotate: -40deg;
  transition: 0.5s;
}
.wrapper .select input {
  color: var(--text-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: var(--border-radius);
  padding: 12px 20px;
  font-size: 16px;
  background-color: var(--primary-color);
  box-shadow: var(--box-shadow);
  outline: none;
  border: none;
  text-transform: capitalize;
}
.wrapper .select .select-content {
  position: absolute;
  top: 50px;
  border-radius: var(--border-radius);
  width: 100%;
  background-color: var(--primary-color);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s;
}
.wrapper .select .select-content .option {
  padding: 12px 20px;
  cursor: pointer;
  color: var(--text-color);
  text-transform: capitalize;
}
.wrapper .select .select-content .option:hover {
  background-color: var(--hover-color);
  color: var(--hover-text-color);
}
.wrapper .select.open::before {
  right: 20px;
}
.wrapper .select.open::after {
  right: 28px;
}
.wrapper .select.open .select-content {
  opacity: 1;
  visibility: visible;
}

.snowflake {
  color: #fff;
  position: absolute;
  top: -20px;
  animation: fall linear forwards;
}

@keyframes fall {
  to {
    transform: translateX(var(--wind-transform)) translateY(105vh);
  }
}